<template>
  <div class="box-main">
    <div class="topHeaderCard">
      <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
        返回
      </a-button>
    </div>
    <div class="bax-main-content">
      <div class="patient-box">
        <div class="patient-info">
          <img
            :src="
              patInfo && patInfo.gender ? (patInfo.gender == '男性' ? manPic : womanPic) : userPic
            "
            alt=""
          />
          <div class="patient-right">
            <div style="display: flex; align-items: center">
              <span class="pat-label pat-name" v-if="patInfo && patInfo.patName">
                {{ patInfo && patInfo.patName ? patInfo.patName : '' }}
              </span>
              <span class="pat-label">{{
                patInfo && patInfo.age ? patInfo.age + '岁' : '-岁'
              }}</span>
              <span class="pat-label">
                {{ patInfo && patInfo.gender == '女性' ? '女性' : '男性' }}</span
              >
              <span class="pat-label">
                联系电话：<span style="color: #1d2129">{{
                  patInfo ? patInfo.phone || '' : ''
                }}</span>
              </span>
            </div>
          </div>
        </div>
        <a-button type="primary" @click="showDetailed">体检详细结果</a-button>
      </div>
      <div class="check-box" ref="container">
        <div class="left-box" :style="{ width: !isShrinkHide ? leftWidth + 'px' : '100%' }">
          <div class="title-name">
            <span class="text-icon" />
            <span class="text-name">主检报告</span>
            <span
              :class="[
                'examine-state',
                patInfo.approvalStatus == 'WAIT_APPROVAL'
                  ? 'examine-fail'
                  : patInfo.approvalStatus == 'FINISHED'
                    ? 'examine-success'
                    : 'examine-wait'
              ]"
              >{{
                patInfo.approvalStatus == 'WAIT_APPROVAL'
                  ? '待审核'
                  : patInfo.approvalStatus == 'FINISHED'
                    ? '审核完成'
                    : '待生成'
              }}</span
            >
          </div>
          <template v-if="patInfo.approvalStatus == 'INIT'">
            <a-empty
              style="margin-top: 100px"
              :image-style="{
                height: '136px'
              }"
            >
              <template #image>
                <img src="@/assets/checkReport/empty.png" alt="" />
              </template>
              <template #description>
                <span class="empty-text">主检报告暂未生成</span>
              </template>
            </a-empty>
          </template>
          <template v-else-if="patInfo.approvalStatus == 'WAIT_APPROVAL'">
            <div
              ref="examineingRef"
              style="height: calc(100% - 78px); padding-right: 5px; overflow: hidden auto"
            >
              <template v-if="!isEditSate">
                <div class="title-item">重要异常结果</div>
                <template v-if="abnormalResult && abnormalResult.length > 0">
                  <div class="grid-item" v-for="(item, index) in abnormalResult" :key="index">
                    <div class="sub-title">
                      <span>{{ index + 1 }}.{{ item.name }}</span>
                      <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                      <span
                        v-if="item.abnormalType && item.abnormalType.length > 0"
                        class="result-label"
                        >{{ item.abnormalType }}</span
                      >
                    </div>
                    <div class="result-content">
                      <div class="result-title">依据</div>
                      <div class="text-content">{{ item.basic }}</div>
                      <div class="result-title">指导建议</div>
                      <div class="text-content">{{ item.suggest }}</div>
                    </div>
                  </div>
                </template>
                <a-empty v-else style="margin-top: 50px" />
                <div class="title-item">诊断</div>
                <template v-if="diagnosis && diagnosis.length > 0">
                  <div class="grid-item" v-for="(item, index) in diagnosis" :key="index">
                    <div class="sub-title">
                      <span>{{ index + 1 }}.{{ item.name }}</span>
                      <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                      <span
                        class="result-label"
                        v-if="item.abnormalType && item.abnormalType.length > 0"
                        >{{ item.abnormalType }}</span
                      >
                    </div>
                    <div class="result-content">
                      <div class="result-title">依据</div>
                      <div class="text-content">{{ item.basic }}</div>
                      <div class="result-title">指导建议</div>
                      <div class="text-content">{{ item.suggest }}</div>
                    </div>
                  </div>
                </template>
                <a-empty v-else style="margin-top: 50px" />
                <div class="title-item">其他阳性发现</div>
                <template v-if="others && others.length > 0">
                  <div class="grid-item" v-for="(item, index) in others" :key="index">
                    <div class="sub-title">
                      <span>{{ index + 1 }}.{{ item.name }}</span>
                      <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                      <span
                        class="result-label"
                        v-if="item.abnormalType && item.abnormalType.length > 0"
                        >{{ item.abnormalType }}</span
                      >
                    </div>
                    <div class="result-content">
                      <div class="result-title">指导建议</div>
                      <div class="text-content">{{ item.suggest }}</div>
                    </div>
                  </div>
                </template>
                <a-empty v-else style="margin-top: 50px" />
              </template>
              <template v-else>
                <AddOrUpdate :sortLists="sortList" ref="addOrUpdateRef" />
              </template>
            </div>
            <div v-if="abnormalResult.length <= 0 && diagnosis.length <= 0 && others.length <= 0" />
            <div v-else>
              <div style="margin-top: 16px" v-if="!isEditSate">
                <a-button type="primary" style="margin-right: 8px" @click="examineFun"
                  >审核通过</a-button
                >
                <a-button @click="editFormHandle">修改</a-button>
              </div>
              <div style="margin-top: 16px" v-else>
                <a-button type="primary" style="margin-right: 8px" @click="confirm">确认</a-button>
                <a-button @click="cancelEdit">取消</a-button>
              </div>
            </div>
          </template>
          <template v-else>
            <div
              ref="examineingRef"
              style="height: calc(100% - 30px); padding-right: 5px; overflow: hidden auto"
            >
              <div class="title-item">重要异常结果</div>
              <template v-if="abnormalResult && abnormalResult.length > 0">
                <div class="grid-item" v-for="(item, index) in abnormalResult" :key="index">
                  <div class="sub-title">
                    <span>{{ item.name }}</span>
                    <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                    <span
                      class="result-label"
                      v-if="item.abnormalType && item.abnormalType.length > 0"
                      >{{ item.abnormalType }}</span
                    >
                  </div>
                  <div class="result-content">
                    <div class="result-title">依据</div>
                    <div class="text-content">{{ item.basic }}</div>
                    <div class="result-title">指导建议</div>
                    <div class="text-content">{{ item.suggest }}</div>
                  </div>
                </div>
              </template>
              <a-empty v-else style="margin-top: 50px" />
              <div class="title-item">诊断</div>
              <template v-if="diagnosis && diagnosis.length > 0">
                <div class="grid-item" v-for="(item, index) in diagnosis" :key="index">
                  <div class="sub-title">
                    <span>{{ item.name }}</span>
                    <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                    <span
                      class="result-label"
                      v-if="item.abnormalType && item.abnormalType.length > 0"
                      >{{ item.abnormalType }}</span
                    >
                  </div>
                  <div class="result-content">
                    <div class="result-title">依据</div>
                    <div class="text-content">{{ item.basic }}</div>
                    <div class="result-title">指导建议</div>
                    <div class="text-content">{{ item.suggest }}</div>
                  </div>
                </div>
              </template>
              <a-empty v-else style="margin-top: 50px" />
              <div class="title-item">其他阳性发现</div>
              <template v-if="others && others.length > 0">
                <div class="grid-item" v-for="(item, index) in others" :key="index">
                  <div class="sub-title">
                    <span>{{ item.name }}</span>
                    <span v-if="item.icdCode"> [{{ item.icdCode }}]</span>
                    <span
                      class="result-label"
                      v-if="item.abnormalType && item.abnormalType.length > 0"
                      >{{ item.abnormalType }}</span
                    >
                  </div>
                  <div class="result-content">
                    <div class="result-title">指导建议</div>
                    <div class="text-content">{{ item.suggest }}</div>
                  </div>
                </div>
              </template>
              <a-empty v-else style="margin-top: 50px" />
            </div>
          </template>
        </div>
        <div class="change-width-line" @mousedown="startDrag" v-if="!isShrinkHide">
          <div class="line-item" />
        </div>
        <div class="right-box" :style="{ width: rightWidth + 'px' }" v-if="!isShrinkHide">
          <div class="shrink-btn" @click="shrinkHandle">
            <ShrinkOutlined style="font-size: 24px" />
          </div>
          <div class="title-name">
            <span class="text-icon" />
            <span class="text-name">体检详细结果</span>
          </div>
          <a-tabs type="card" style="height: 'calc(100% - 46px)'; margin-top: 16px">
            <a-tab-pane
              key="1"
              tab="主要异常结果"
              :style="{
                height: 'calc(100vh - 380px)',
                paddingRight: '5px',
                overflow: 'hidden auto'
              }"
            >
              <ErrorCheck
                v-if="ErrorCheckData && ErrorCheckData.length > 0"
                :sortList="ErrorCheckData"
                :patInfo="patInfo"
              />
              <a-empty style="margin-top: 40px" v-else />
            </a-tab-pane>
            <a-tab-pane
              key="2"
              tab="体格检查"
              :style="{
                height: 'calc(100vh - 380px)',
                paddingRight: '5px',
                overflow: 'hidden auto'
              }"
            >
              <PhysiqueCheck
                v-if="tigeCheck && tigeCheck.length > 0"
                :sortList="tigeCheck"
                :patInfo="patInfo"
              />
              <a-empty style="margin-top: 40px" v-else />
            </a-tab-pane>
            <a-tab-pane
              key="3"
              tab="实验室检查"
              :style="{
                height: 'calc(100vh - 380px)',
                paddingRight: '5px',
                overflow: 'hidden auto'
              }"
            >
              <LaboratoryCheck
                v-if="laboratoryCheck && laboratoryCheck.length > 0"
                :sortList="laboratoryCheck"
                :patInfo="patInfo"
              />
              <a-empty style="margin-top: 40px" v-else />
            </a-tab-pane>
            <a-tab-pane
              key="4"
              tab="其他辅助检查"
              :style="{
                height: 'calc(100vh - 380px)',
                paddingRight: '5px',
                overflow: 'hidden auto'
              }"
            >
              <OtherAuxiliaryCheck
                v-if="fuzhuCheck && fuzhuCheck.length > 0"
                :sortList="fuzhuCheck"
                :patInfo="patInfo"
              />
              <a-empty style="margin-top: 40px" v-else />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import { ArrowLeftOutlined, ShrinkOutlined } from '@ant-design/icons-vue'
import manPic from '@/assets/patient/man.png'
import womanPic from '@/assets/patient/woman.png'
import userPic from '@/assets/user.png'
import AddOrUpdate from './addOrUpdate.vue'
import ErrorCheck from './checkupResult/error.vue'
import PhysiqueCheck from './checkupResult/physique.vue'
import LaboratoryCheck from './checkupResult/laboratory.vue'
import OtherAuxiliaryCheck from './checkupResult/otherAuxiliary.vue'
import { typeOf } from '@/utils/tools'
import {
  recordInfo,
  recordUpdate,
  recordReview,
  apppercdGetData
} from '@/api/intelligentInspectionReport/index'
import { message } from 'ant-design-vue'

const emit = defineEmits(['close'])
const examineingRef = ref<any>()

const container = ref(null)
const leftWidth = ref(0)
const rightWidth = ref(0)
const isDragging = ref(false)

const patInfo = ref<any>({})
const ErrorCheckData = ref<any>([])
const abnormalResult = ref<any>([])
const diagnosis = ref<any>([])
const others = ref<any>([])
const isEditSate = ref<boolean>(false)
const tigeCheck = ref<any>([])
const laboratoryCheck = ref<any>([])
const fuzhuCheck = ref<any>([])
const sortList = reactive<any>({
  resultList: [],
  resultListTwo: [],
  diagnosisList: [],
  diagnosisListTwo: [],
  otherList: [],
  otherListTwo: []
})

const MIN_WIDTH = 200
const LINE_WIDTH = 2

const isShrinkHide = ref(false)
const init = (data: any) => {
  isShrinkHide.value = false
  patInfo.value = data
  sortList.resultList = []
  sortList.resultListTwo = []
  sortList.diagnosisList = []
  sortList.diagnosisListTwo = []
  sortList.otherList = []
  sortList.otherListTwo = []
  if (patInfo.value && patInfo.value.approvalStatus != 'INIT') {
    recordInfoFun()
    sortList.otherList = [
      {
        conclusion: '结论',
        suggestion: '指导建议'
      }
    ]
    sortList.otherListTwo = [
      {
        conclusion: '结论',
        suggestion: '指导建议'
      }
    ]
  }
  apppercdGetDataFun()

  const total = container.value?.clientWidth
  leftWidth.value = total * 0.6
  rightWidth.value = total * 0.4 - LINE_WIDTH

  window.addEventListener('resize', onResize)

  // window.addEventListener('mousemove', onMouseMove)
  // window.addEventListener('mouseup', stopDrag)
}

const onResize = () => {
  const total = container.value?.clientWidth
  leftWidth.value = total * 0.6
  rightWidth.value = total * 0.4 - LINE_WIDTH
}

const updateWidths = (clientX) => {
  const containerRect = container.value?.getBoundingClientRect()
  const totalWidth = containerRect.width
  const offsetLeft = containerRect.left
  const mouseX = clientX - offsetLeft

  const newLeft = Math.min(Math.max(mouseX, MIN_WIDTH), totalWidth - MIN_WIDTH)
  const newRight = totalWidth - newLeft - LINE_WIDTH

  leftWidth.value = newLeft
  rightWidth.value = newRight
}

const shrinkHandle = () => {
  rightWidth.value = 0
  isShrinkHide.value = true
  nextTick(() => {
    leftWidth.value = container.value?.getBoundingClientRect()
  })
}

const showDetailed = () => {
  isShrinkHide.value = false
  nextTick(() => {
    const total = container.value?.clientWidth
    leftWidth.value = total * 0.6
    rightWidth.value = total * 0.4 - LINE_WIDTH
  })
}

const startDrag = (e) => {
  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', stopDrag)

  isDragging.value = true
  document.body.style.userSelect = 'none'
  document.body.style.cursor = 'ew-resize'
  updateWidths(e.clientX)
}

const stopDrag = () => {
  isDragging.value = false
  document.body.style.cursor = ''
  document.body.style.userSelect = ''
  window.removeEventListener('mousemove', onMouseMove)
  window.removeEventListener('mouseup', stopDrag)
}

const onMouseMove = (e) => {
  if (isDragging.value) {
    updateWidths(e.clientX)
  }
}

const recordInfoFun = () => {
  recordInfo({
    id: patInfo.value.id
  })
    .then((res) => {
      if (res.data && res.data.abnormalResult && JSON.parse(res.data.abnormalResult).length > 0) {
        abnormalResult.value = JSON.parse(res.data.abnormalResult)
        sortList.resultList = JSON.parse(res.data.abnormalResult)
        sortList.resultListTwo = JSON.parse(res.data.abnormalResult)
      } else {
        abnormalResult.value = []
        sortList.resultList = []
        sortList.resultListTwo = []
      }
      if (res.data && res.data.diagnosis && JSON.parse(res.data.diagnosis).length > 0) {
        diagnosis.value = JSON.parse(res.data.diagnosis)
        sortList.diagnosisList = JSON.parse(res.data.diagnosis)
        sortList.diagnosisListTwo = JSON.parse(res.data.diagnosis)
      } else {
        diagnosis.value = []
        sortList.diagnosisList = []
        sortList.diagnosisListTwo = []
      }
      if (res.data && res.data.otherContent && JSON.parse(res.data.otherContent).length > 0) {
        others.value = JSON.parse(res.data.otherContent)
        sortList.otherList = JSON.parse(res.data.otherContent)
        sortList.otherListTwo = JSON.parse(res.data.otherContent)
      } else {
        others.value = []
        sortList.otherList = []
        sortList.otherListTwo = []
      }

      if (res.data && res.data.abnormalItem && JSON.parse(res.data.abnormalItem).length > 0) {
        const dataList = JSON.parse(res.data.abnormalItem)
        const newList = []
        //先循环最外面大标题
        for (let i = 0; i < dataList.length; i++) {
          const newName = newList.find((item) => item.name == dataList[i].itemTypeName)
          //   if (dataList[i].itemTypeName == '实验室检查') {
          let content = {}
          //
          content = JSON.parse(dataList[i].content)
          content.itemName = dataList[i].itemName
          //   if (dataList[i].content) {
          //     console.log(dataList[i].content)
          //     content = JSON.parse(dataList[i].content)
          //     console.log(11111, content)
          //     content.itemName = dataList[i].itemName
          //   } else {
          //     content = {}
          //     content.itemName = ''
          //   }

          dataList[i].content = content
          dataList[i] = { ...dataList[i], ...content }
          //   }
          if (!newName) {
            if (
              typeOf(dataList[i].content) == 'object' ||
              typeOf(dataList[i].content) == 'string'
            ) {
              dataList[i].content = [dataList[i].content]
            } else {
              dataList[i].content = JSON.parse(dataList[i].content)
            }

            newList.push({ name: dataList[i].itemTypeName, list: [dataList[i]] })
          } else {
            const index = newList.findIndex((item) => {
              return item.name === dataList[i].itemTypeName
            })
            const indexTwo = newList[index].list.findIndex((item) => {
              return item.itemGroupName === dataList[i].itemGroupName
            })
            const newNameTwo = newList[index].list.find(
              (item) => item.itemGroupName == dataList[i].itemGroupName
            )
            if (
              typeOf(dataList[i].content) == 'object' ||
              typeOf(dataList[i].content) == 'string'
            ) {
              dataList[i] = { ...dataList[i], ...dataList[i].content }
            } else {
              dataList[i] = { ...dataList[i], ...dataList[i].content[0] }
            }
            if (dataList[i].itemTypeName == '实验室检查') {
              newList[index].list.push(dataList[i])
            } else {
              if (!newNameTwo) {
                dataList[i].content = [dataList[i].content]
                newList[index].list.push(dataList[i])
              } else {
                newList[index].list[indexTwo].content.push(dataList[i].content)
              }
            }
          }
        }
        const newDataList = [
          {
            name: '体格检查',
            list: []
          },
          {
            name: '实验室检查',
            list: []
          },
          {
            name: '其他辅助检查',
            list: []
          }
        ]
        for (let i = 0; i < newList.length; i++) {
          if (newList[i].name == '常规检查') {
            newDataList[0].list = newList[i].list
          } else if (newList[i].name == '实验室检查') {
            newDataList[1].list = newList[i].list
          } else {
            newDataList[2].list = newList[i].list
          }
        }
        ErrorCheckData.value = newDataList
      } else {
        ErrorCheckData.value = []
      }
    })
    .catch(() => {
      // loading.value = false
    })
}

// 体格检查
const apppercdGetDataFun = () => {
  apppercdGetData({
    // empi: '179f5a9e94f52a6a11d8de5796fae002',
    // peSmryTpCdEnum: 'TIGE',
    // peRcdNo: '000000474799'
    empi: patInfo.value.empi,
    peSmryTpCdEnum: 'TIGE',
    peRcdNo: patInfo.value.peRecordId
  }).then((res) => {
    const tigeList = res.data.TIGE
    const tigeNewDd = []
    Object.keys(tigeList)
      .sort()
      .forEach(function (key) {
        tigeNewDd.push({
          name: key,
          list: tigeList[key]
        })
      })
    tigeCheck.value = tigeNewDd
  })
  apppercdGetData({
    // empi: '179f5a9e94f52a6a11d8de5796fae002',
    // peSmryTpCdEnum: 'SYS',
    // peRcdNo: '000000292552'
    empi: patInfo.value.empi,
    peSmryTpCdEnum: 'SYS',
    peRcdNo: patInfo.value.peRecordId
  }).then((res) => {
    const laboratoryList = res.data.SYS
    const laboratoryNewDd = []
    Object.keys(laboratoryList)
      .sort()
      .forEach(function (key) {
        laboratoryNewDd.push({
          name: key,
          list: laboratoryList[key]
        })
      })
    laboratoryCheck.value = laboratoryNewDd
  })
  apppercdGetData({
    // empi: '179f5a9e94f52a6a11d8de5796fae002',
    // peSmryTpCdEnum: 'FUZHU',
    // peRcdNo: '000000474799'
    empi: patInfo.value.empi,
    peSmryTpCdEnum: 'FUZHU',
    peRcdNo: patInfo.value.peRecordId
  }).then((res) => {
    const fuzhuList = res.data.FUZHU
    const newDd = []
    Object.keys(fuzhuList)
      .sort()
      .forEach(function (key) {
        newDd.push({
          name: key,
          list: fuzhuList[key]
        })
      })
    fuzhuCheck.value = newDd
  })
}

// 开始修改
const editFormHandle = () => {
  isEditSate.value = true
  examineingRef.value.scrollTo({ top: 0, behavior: 'smooth' })
}

// 取消修改
const cancelEdit = () => {
  sortList.diagnosisList = JSON.parse(JSON.stringify(sortList.diagnosisListTwo))
  sortList.resultList = JSON.parse(JSON.stringify(sortList.resultListTwo))
  sortList.otherList = JSON.parse(JSON.stringify(sortList.otherListTwo))
  isEditSate.value = false
  examineingRef.value.scrollTo({ top: 0, behavior: 'smooth' })
}
// 审核通过
const examineFun = () => {
  recordReview({
    id: patInfo.value.id
  }).then((res) => {
    if (res.code == 0) {
      message.success('审核成功')
      emit('close')
    } else {
      message.error('审核失败')
    }
  })
}
// 确认修改
const confirm = () => {
  const resultList = sortList.resultList
  const diagnosisList = sortList.diagnosisList
  const otherList = sortList.otherList
  let isContinue = false
  let resultIndex = 0
  let isContinueTwo = false
  let resultIndexTwo = 0
  let isContinueThree = false
  let resultIndexThree = 0
  if (resultList.length > 0) {
    for (let i = 0; i < resultList.length; i++) {
      if (
        resultList[i].name == '' ||
        resultList[i].abnormalType == [] ||
        resultList[i].basic == '' ||
        resultList[i].suggest == ''
      ) {
        resultIndex = i
        isContinue = true
      }
    }
    if (isContinue == true) {
      message.error('请先填写完成以上内容！')
      examineingRef.value.scrollTo({ top: 56 + 402 * resultIndex, behavior: 'smooth' })
      return false
    }
  }
  if (diagnosisList.length > 0) {
    for (let i = 0; i < diagnosisList.length; i++) {
      if (
        diagnosisList[i].name == '' ||
        diagnosisList[i].basic == '' ||
        diagnosisList[i].suggest == ''
      ) {
        resultIndexTwo = i
        isContinueTwo = true
      }
    }
    if (isContinueTwo == true) {
      message.error('请先填写完成以上内容！')
      examineingRef.value.scrollTo({
        top: 160 + 402 * (resultList.length + resultIndexTwo),
        behavior: 'smooth'
      })
      return false
    }
  }
  if (otherList.length > 0) {
    for (let i = 0; i < otherList.length; i++) {
      if (otherList[i].name == '' || otherList[i].suggest == '') {
        resultIndexThree = i
        isContinueThree = true
      }
    }
    if (isContinueThree == true) {
      message.error('请先填写完成以上内容！')
      examineingRef.value.scrollTo({
        top: 160 + 402 * (resultList.length + diagnosisList.length + resultIndexThree),
        behavior: 'smooth'
      })
      return false
    }
  }

  recordUpdate({
    id: patInfo.value.id,
    abnormalResult: JSON.stringify(resultList),
    diagnosis: JSON.stringify(diagnosisList),
    otherContent: JSON.stringify(otherList)
  }).then((res) => {
    if (res.code == 0) {
      message.success('修改成功')
      isEditSate.value = false
      examineingRef.value.scrollTo({ top: 0, behavior: 'smooth' })
      if (patInfo.value && patInfo.value.approvalStatus != 'INIT') {
        recordInfoFun()
      }
    } else {
      message.error('修改失败')
    }
  })
  return true
}
const resetBack = () => {
  window.removeEventListener('mousemove', onMouseMove)
  window.removeEventListener('mouseup', stopDrag)
  window.removeEventListener('resize', onResize)
  emit('close')
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.box-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 24px;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 16px;
    overflow: hidden;

    .page-content {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .check-box {
      display: flex;
      width: 100%;
      height: calc(100% - 96px);
      margin-top: 16px;
      overflow: hidden;

      .left-box,
      .right-box {
        position: relative;
        box-sizing: border-box;
        height: 100%;
        padding: 24px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 8px;
        transition: width 0.1s ease;
      }

      .right-box {
        .shrink-btn {
          position: absolute;
          top: 20px;
          right: 20px;
          cursor: pointer;
        }
      }

      .change-width-line {
        position: relative;
        width: 2px;
        height: 100%;
        margin: 0 8px;
        cursor: ew-resize;
        background-color: #8f8b8b;
      }
    }
  }

  .patient-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    background-color: #fff;
    border-radius: 8px;
  }

  .patient-info {
    display: flex;
    align-items: center;

    img {
      width: 48px;
      height: 48px;
      margin-right: 8px;
      border-radius: 50%;
    }

    .patient-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .pat-label {
      margin-right: 12px;
      color: #4e5969;
    }

    .pat-name {
      font-size: 20px;
      font-weight: 600;
      color: #1d2129;
    }
  }
}

.empty-text {
  font-weight: 400;
  color: #4e5969;
}

.title-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 600;

  .text-icon {
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    background: #165dff;
  }

  .text-name {
    font-size: 18px;
    font-weight: 600;
  }
}

.title-item {
  padding: 8px 16px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  background: #f7f8fa;
}

.grid-item {
  margin-top: 12px;
  border: 1px solid #e5e6eb;

  .sub-title {
    padding: 9px 12px;
    color: #1d2129;
    border-bottom: 1px solid #e5e6eb;

    span {
      font-weight: bold;

      &:nth-child(2) {
        margin-left: 5px;
      }
    }

    .result-label {
      padding: 1px 8px;
      margin-left: 8px;
      font-weight: 500;
      color: #3491fa;
      background: #e8f7ff;
      border: 1px solid #3491fa;
      border-radius: 2px;
    }
  }

  .result-content {
    padding: 12px;
    background: #f7f8fa;

    .result-title {
      margin-top: 8px;
      font-weight: bold;
      color: #1d2129;
    }

    .text-content {
      padding: 12px;
      margin-top: 12px;
      background: #fff;
      border: 1px solid #e5e6eb;
    }

    .result-title:first-child {
      margin-top: 0;
    }
  }
}

.examine-state {
  padding: 1px 8px;
  margin-left: 8px;
  line-height: 22px;
  border-radius: 2px;
}

.examine-success {
  color: #3491fa;
  background: #e8f7ff;
}

.examine-fail {
  color: #f53f3f;
  background-color: #ffece8;
}

.examine-wait {
  color: #ff7d00;
  background-color: #fff7e8;
}
</style>
